import React, { PureComponent } from 'react';
import { connect } from 'react-redux';
import { withRouter, Link } from 'react-router-dom';
import styles from './style.module.scss'
class TopSpot extends PureComponent {
    render () {
        const { data } = this.props;
        return (
            <div className={styles['top-spot']} >
                <div className={styles['top-container']}>
                    <div className={styles['top-head']}>
                        <img src="http://mobuz-live.oss-cn-hangzhou.aliyuncs.com/web/icon/icon_ranking%402x.png" alt=""/>
                        <span>本月热门top15</span>
                    </div>
                    <div className={styles['top-spot-list']}>
                        {
                            data.map( item => {
                                return (
                                    <Link className={styles['score-item']} key={JSON.stringify(item)} target="_blank" to={{
                                        pathname: "/scoreParticulars",
                                        search: `score_id=${item['id']}`
                                      }}>
                                        <div className={styles['score-name']}>{item['name']}</div>
                                        <div className={styles['score-hot']}>
                                            <img src="http://mobuz-live.oss-cn-hangzhou.aliyuncs.com/web/icon/icon_redu_gray%402x.png" alt="热度"/>
                                            <span>{item['frontMonthHot'] || 0}</span>
                                        </div>
                                    </Link>
                                )
                            })
                        }
                    
                    </div>
                </div>
            </div>
        )
    }
}

const mapState = (state) => ({

});

const mapDispatch = (dispatch) => ({

});


export default connect(mapState, mapDispatch)(withRouter(TopSpot));